<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="../../../vue.js"></script>
  </head>

  <body>
    <div id="app">
      <!-- 
        v-once:
          只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
        v-pre:
          跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。
       -->
      <button @click="userInfo.price++">身价改变</button>
      <div v-once>
        <h2>用户名-{{userInfo.username}}</h2>
        <h3>身价是-{{userInfo.price}}</h3>
      </div>

      <div v-pre>
        <h2>用户名-{{userInfo.username}}</h2>
        <h3>身价是-{{userInfo.price}}</h3>
      </div>
    </div>
    <script>
      Vue.config.productionTip = false;

      const vm = new Vue({
        el: "#app",
        data() {
          return {
            userInfo: {
              username: "laowang",
              price: 1000,
            },
          };
        },
      });
    </script>
  </body>
</html>
